<template>
  <div class="container">
    <!-- 顶部 -->
    <div class="top-header">
      <div class="title">
        <h1>{{ title }}</h1>
        <div class="top-header-tip">
          <div class="sub-title">此数据为实时真实数据，数据来源：新浪新闻</div>
          <div class="last-update-time">更新时间：{{ basicData.time }}</div>
        </div>
      </div>
    </div>
    <div class="main-content">
      <el-row>
        <el-col :span="18">
          <!-- 中间信息开始 -->
          <div class="statistics-content">
            <!-- 中间左侧开始 -->
            <div class="main-inner">
              <el-row>
                <el-col :span="10">
                  <chart-card title="累计确诊排名（TOP 10）" :customClass="`chart-item-bottom-sep`">
                    <province-ranking-bar-chart ref="topConfirmedCountRankChart" :data="top10ProvinceData" style="width: 100%; height: 380px" />
                  </chart-card>
                  <!-- 占比 -->
                  <chart-card title="占比" :customClass="`chart-item-bottom-sep`">
                    <basic-proportion-chart ref="basicProportionChart" :data="basicData" style="width: 100%; height: 120px" />
                  </chart-card>
                  <chart-card title="最近一周累计确诊与治愈">
                    <current-confirmed-compare-bar-chart ref="confirmSingleBarChart" :data="confirmSingleBarChartData" style="width: 100%; height: 310px" />
                  </chart-card>
                </el-col>
                <el-col :span="14">
                  <!-- 顶部基本统计信息开始 -->
                  <div class="basic-header flex">
                    <!-- 顶部统计信息开始 -->
                    <div class="top-basic-info">
                      <basic-data-item-label label="现有确诊" :config="defaultDataConfig.econnum" :inCrValue="basicData.econadd" />
                      <basic-data-item-label label="累计确诊" :config="defaultDataConfig.contotal" :inCrValue="basicData.conadd" />
                      <!-- 累计治愈 -->
                      <basic-data-item-label label="累计治愈" :config="defaultDataConfig.curetotal" :inCrValue="basicData.cureadd" />
                      <!-- 死亡人数 -->
                      <basic-data-item-label label="累计死亡" :config="defaultDataConfig.deathtotal" :inCrValue="basicData.deathadd" />
                    </div>
                    <!-- 顶部统计信息结束 -->
                  </div>
                  <!-- 顶部基本统计信息开始 -->
                  <div class="main-inner-map-wraper">
                    <!-- 地图 -->
                    <div class="map">
                      <data-map ref="dataMap" title="中牟县" :list="mapDataList" style="width: 100%; height: 100%" />
                    </div>
                  </div>
                </el-col>
              </el-row>
            </div>
            <!-- 中间左侧结束 -->
          </div>
          <!-- 中间信息结束 -->
        </el-col>
        <el-col :span="6">
          <!-- 右侧区域开始 -->
          <div class="main-right">
            <!-- 治愈率和死亡率 -->
            <chart-card title="治愈率和死亡率" :innerClass="`cure-and-dead-rate-chart`" :customClass="`chart-item-bottom-sep`">
              <cured-and-dead-rate-chart v-if="rate.curedRate > 0" ref="cureRateChart" :data="rate" title="治愈率" style="width: 280px; height: 130px" />
            </chart-card>
            <chart-card title="疫情趋势" :customClass="`chart-item-bottom-sep`">
              <basic-trend-chart :data="basicIncrTrendData" ref="confirmedCountTrendChart" style="width: 100%; height: 320px" />
            </chart-card>
            <chart-card title="">
              <div slot="title" class="province-table-title flex">
                各区域累计确诊
                <el-link icon="el-icon-view" style="color: #bcbcbf; padding-left: 10px" :underline="false" @click="provinceTableDialogShowHandler">详情</el-link>
              </div>
              <dv-scroll-board :config="areaConfirmedCountBoardConfig" style="width: 100%; height: 360px" />
            </chart-card>
          </div>
          <!-- 右侧区域结束 -->
        </el-col>
      </el-row>
    </div>
    <!-- 其他页面 -->
    <div class="province-data-table-wrapper">
      <el-dialog :visible.sync="provinceTableDialogVisible" width="50%" :before-close="provinceTableDialogClose">
        <div slot="title" class="province-data-modal-title">
          <p>各区域数据表</p>
          <span class="province-data-modal-update-time">（更新时间：{{ basicData.time }}）</span>
        </div>
        <div class="area-data-table-wrapper">
          <el-table class="area-data-table" :data="areaDataList" style="width: 100%">
            <el-table-column prop="belongArea" align="center" label="区域名                                                                                 "> </el-table-column>
            <el-table-column prop="conNum" align="center" label="累计确诊"> </el-table-column>
            <el-table-column prop="cureNum" align="center" label="累计治愈"> </el-table-column>
            <el-table-column prop="deathNum" align="center" label="累计死亡"> </el-table-column>
          </el-table>
        </div>
      </el-dialog>
      <!-- 关于弹窗 -->
      <el-dialog title="关于" :visible.sync="aboutDialogVisible" width="30%" :before-close="aboutDialogClose">
        <about />
      </el-dialog>
      <!-- 关于图标 -->
      <div class="about-wraper">
        <i class="el-icon-info" style="font-size: 30px" @click="aboutDialogShowHandler"></i>
      </div>
    </div>
  </div>
</template>
<script>
import ChartCard from '@/components/ChartCard'
import DataMap from '@/components/DataMap'
import CuredAndDeadRateChart from '@/components/CuredAndDeadRateChart'
import BasicDataItemLabel from '@/components/BasicDataItemLabel'
import BasicTrendChart from '@/components/BasicTrendChart'
import ProvinceRankingBarChart from '@/components/ProvinceRankingBarChart'
import CurrentConfirmedCompareBarChart from '@/components/CurrentConfirmedCompareBarChart'
import About from '@/components/About'
import BasicProportionChart from '@/components/BasicProportionChart'
import { mapActions } from 'vuex'

// 数字翻牌器-千分位分隔
const formatter = number => {
  const numbers = number.toString().split('').reverse()
  const segs = []
  while (numbers.length) segs.push(numbers.splice(0, 3).join(''))
  return segs.join(',').split('').reverse().join('')
}
// 数据样式
const getNumberStyle = (color = '#E8EAF6', fontSize = 30, fontWeight = 'bolder') => {
  return {
    fontSize: fontSize,
    fill: color,
    fontWeight: fontWeight
  }
}
// 数字翻牌器配置
const initBasicConfig = (data = null) => {
  let econnum = data ? [data.econnum] : 0
  let contotal = data ? [data.contotal] : 0
  let deathtotal = data ? [data.deathtotal] : 0
  let curetotal = data ? [data.curetotal] : 0
  return {
    econnum: {
      number: [econnum],
      content: '{nt}',
      formatter,
      style: getNumberStyle()
    },
    contotal: {
      number: [contotal],
      content: '{nt}',
      formatter,
      style: getNumberStyle('#2E8EEA')
    },
    deathtotal: {
      number: [deathtotal],
      content: '{nt}',
      formatter,
      style: getNumberStyle('#D32E58')
    },
    curetotal: {
      number: [curetotal],
      content: '{nt}',
      formatter,
      style: getNumberStyle()
    }
  }
}
//区域排名配置
const initAreaConfirmedCountBoardConfig = (resultList = []) => {
  return {
    header: ['区域名', '累计确诊', '累计治愈', '累计死亡'],
    headerHeight: 30,
    data: resultList,
    align: ['center'],
    rowNum: 10,
    index: true,
    headerBGC: '',
    oddRowBGC: '',
    evenRowBGC: '',
    carousel: 'single'
  }
}
export default {
  components: {
    ChartCard,
    DataMap,
    CuredAndDeadRateChart,
    BasicDataItemLabel,
    BasicTrendChart,
    ProvinceRankingBarChart,
    CurrentConfirmedCompareBarChart,
    About,
    BasicProportionChart
  },
  data() {
    return {
      title: '中牟县新冠肺炎疫情数据大屏',
      provinceTableDialogVisible: false,
      aboutDialogVisible: false,
      commonData: {},
      //翻牌器数据格式
      basicData: {
        contotal: 0,
        conadd: '',
        deathadd: '',
        deathtotal: 0,
        curetotal: 0,
        cureadd: '',
        econnum: 0,
        econadd: '',
        time: '-'
      },
      //翻牌器总数据
      defaultDataConfig: initBasicConfig(),
      cureRateConfig: {
        data: [0],
        shape: 'round'
      },
      deadRateConfig: {
        data: [0],
        shape: 'round'
      },
      countryRankingTakeTurnChartConfig: {
        data: [],
        waitTime: 2000,
        unit: '单位',
        valueFormatter({ value }) {
          const reverseNumber = (value + '').split('').reverse()
          let valueStr = ''

          while (reverseNumber.length) {
            const seg = reverseNumber.splice(0, 3).join('')
            valueStr += seg
            if (seg.length === 3) valueStr += ','
          }

          return valueStr.split('').reverse().join('')
        }
      },
      //初始化
      areaConfirmedCountBoardConfig: initAreaConfirmedCountBoardConfig(),
      areaDataList: [],
      trendDataList: [],
      confirmedCountList: [],
      //确诊前10
      top10ProvinceData: {
        areaList: [],
        valueList: []
      },
      //时序图总数据
      basicIncrTrendData: {
        dateList: [],
        connumList: [],
        curenumList: [],
        deathnumList: []
      },
      //最近一周数据
      confirmSingleBarChartData: {
        dateList: [],
        connumList: [],
        curenumList: []
      },
      //治愈、死亡率
      rate: {
        curedRate: 0,
        deadRate: 0
      },
      mapDataList: []
    }
  },
  methods: {
    ...mapActions('patientInfo', ['optionTreeInfo', 'getPatientNum']),
    //查询基础数据
    queryBasicData() {
      this.$api.epidem.epidemDataInfo().then(res => {
        if (res.code != 0) {
          console.log('错误:' + res.data.msg)
          return
        }
        this.basicData = res.data.records[0]
        this.setBasicData(this.basicData)
      })
    },
    //查询区域疫情数据
    async queryAreaDataList() {
      let self = this
      let res = await this.optionTreeInfo()
      if (res.code != 0) {
        console.log('错误:' + res.msg)
        return
      }
      let pNum = await this.getPatientNum()
      if (pNum.code != 0) {
        console.log('错误:' + pNum.msg)
        return
      }
      self.areaDataList = pNum.data
      // 设置累计排名数据
      self.setAreaRankingData(res.data)
      // 设置各区域累计确诊轮播表格数据
      self.setAreaComfirmedCountBoardData(pNum.data)
      // 设置地图数据
      self.setMapData(res.data)
    },
    //查询历史数据
    queryTrendDataList() {
      this.$api.historyTrend.historyTrendInfo().then(res => {
        if (res.code != 0) {
          console.log('错误:' + res.data.msg)
          return
        }
        this.setBasicIncrTrendData(res.data)
      })
    },
    //处理累计排名数据
    setAreaRankingData(areaData) {
      let areaDataList = []
      let dataValueList = []
      for (let i = 0; i < 10; i++) {
        areaDataList.push(areaData[i].label)
        dataValueList.push(areaData[i].count)
      }
      let data = {
        areaList: areaDataList,
        valueList: dataValueList
      }
      this.top10ProvinceData = data
      console.log(this.top10ProvinceData)
    },
    //处理历史数据
    setBasicIncrTrendData(data) {
      //时间
      let dateList = []
      //累计确诊
      let connumList = []
      //累计死亡
      let deathnumList = []
      //累计治愈
      let curenumList = []

      //七日时间
      let sevenDayDateList = []
      //七日治愈
      let curedCountList = []
      //七日确诊
      let confirmedCountList = []

      let len = data.dateList.length

      for (let i = len - 1; i >= 0; i--) {
        dateList.push(data.dateList[i])
        connumList.push(data.connumList[i])
        curenumList.push(data.curenumList[i])
        deathnumList.push(data.deathnumList[i])
      }

      for (let i = 6; i >= 0; i--) {
        sevenDayDateList.push(data.dateList[i])
        confirmedCountList.push(data.connumList[i])
        curedCountList.push(data.curenumList[i])
      }

      this.basicIncrTrendData = {
        dateList: dateList,
        connumList: connumList,
        curenumList: curenumList,
        deathnumList: deathnumList
      }
      this.confirmSingleBarChartData = {
        dateList: sevenDayDateList,
        curenumList: curedCountList,
        connumList: confirmedCountList
      }
    },
    setAreaComfirmedCountBoardData(areaList) {
      let resultList = []
      resultList = areaList.map(item => {
        return [item.belongArea, item.conNum, item.cureNum, item.deathNum]
      })
      // 重新生成，否则无法刷新状态
      this.areaConfirmedCountBoardConfig = initAreaConfirmedCountBoardConfig(resultList)
    },
    //处理地图数据
    setMapData(dataList) {
      let list = dataList.map(item => {
        return {
          name: item.label,
          value: item.count
        }
      })
      this.mapDataList = list
    },
    provinceTableDialogShowHandler() {
      this.provinceTableDialogVisible = true
    },
    provinceTableDialogClose() {
      this.provinceTableDialogVisible = false
    },
    aboutDialogShowHandler() {
      this.aboutDialogVisible = true
    },
    aboutDialogClose() {
      this.aboutDialogVisible = false
    },
    //处理基础数据，翻牌器与水球图数据
    setBasicData(data) {
      let config = initBasicConfig(data)
      this.defaultDataConfig = config
      // 处理治愈率和死亡率
      this.rate = {
        curedRate: data.curetotal / data.contotal,
        deadRate: data.deathtotal / data.contotal
      }
    },
    //初始查询
    startQueryData() {
      this.queryBasicData()
      this.queryAreaDataList()
      this.queryTrendDataList()
    },
    initAllChart() {
      this.$refs.dataMap.initChart()
      this.$refs.confirmedCountTrendChart.initChart()
      this.$refs.topConfirmedCountRankChart.initChart()
      this.$refs.confirmSingleBarChart.initChart()
      this.$refs.basicProportionChart.initChart()
    }
  },
  mounted() {
    this.startQueryData()
    this.initAllChart()
  }
}
</script>
<style>
.container {
  position: relative;
}
h1 {
  font-size: 35px;
  font-weight: bold;
  padding: 20px;
}
.flex {
  display: flex;
}
.top-header {
  position: relative;
  margin-bottom: 10px;
}
.top-header-tip {
  font-size: 14px;
  position: absolute;
  padding: 20px 20px;
  text-align: right;
  top: 0;
  right: 0;
}
.chart-card {
  background: #0f142b;
  border-radius: 10px;
  margin: 0 20px;
}
.main-inner-map-wraper {
  height: 100%;
  margin: 0 20px;
}
.map {
  width: 99%;
  height: 840px;
  padding: 20px 10px 10px 10px;
}
.province-scroll-board-wrapper {
  padding-top: 10px;
  padding-bottom: 10px;
}
.chart-item-bottom-sep {
  margin-bottom: 20px;
}
.province-table-title {
  color: #fff;
  font-size: 16px;
  font-weight: bold;
  padding: 10px 10px 10px 20px;
  text-align: left;
}
.basic-incr-trend-chart-wrapper {
  padding-bottom: 10px;
}
.sub-title,
.last-update-time,
.province-scroll-board-wrapper ::v-deep .dv-scroll-board .header,
.province-scroll-board-wrapper ::v-deep .dv-scroll-board .rows {
  font-size: 14px;
}
.province-scroll-board-wrapper ::v-deep .dv-scroll-board .rows {
  color: #bcbcbf;
}
.province-data-modal-title {
  color: #000;
  font-size: 20px;
  font-weight: bold;
}
.province-data-modal-update-time {
  color: #58585a;
  font-size: 16px;
  font-weight: normal;
  padding-top: 10px;
  display: block;
}
.cure-and-dead-rate-chart {
  display: flex;
  justify-content: space-around;
}
.top-basic-info {
  display: flex;
}
.dv-scroll-ranking-board .ranking-column .inside-column {
  background: linear-gradient(90deg, #29bfff, #a231ff, #0deccd, #29bfff);
}
.chart-item-container {
  margin: 0 10px;
}
.about-wraper {
  position: fixed;
  bottom: 20px;
  right: 20px;
}
</style>